﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "SpotsHUB Home";
    // +string+ the entire page
}

<style type="text/css">
    html, body {
        font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .row {
        width: 100%;
        margin: auto;
    }

        .row .row {
            padding: 0;
        }

    h2 {
        color: #ee4131;
        border-bottom: 0;
        text-transform: uppercase;
    }

        h2 .fa {
            color: rgb(112, 112, 112);
        }

    p {
        line-height: 1.6em;
        font-size: 1em;
    }

    .read-more a {
        text-transform: uppercase;
        color: #aaaaaa;
        font-size: 14px;
    }

        .read-more a:hover {
            color: #c84b39;
        }

    .read-more img {
        vertical-align: middle;
        width: 18px;
        margin-top: -2px;
    }

    .home-page section .section-wrapper {
        width: 80%;
        margin: auto;
        padding: 20px 0;
    }

    .home-slide {
        position: relative;
    }

        .home-slide .home-slide-image img {
            width: 100%;
            display: block;
        }

    #master-page-wrapper {
        width: 100%;
        padding-top: 0 !important;
    }

    .home-slide-text {
        position: absolute;
        z-index: 1;
        left: 12%;
        top: 18%;
        color: #333;
        text-transform: uppercase;
    }

        .home-slide-text span {
            margin-left: 10px;
            font-size: 1.3em;
            text-shadow: 1px 1px #fff;
        }

        .home-slide-text h2 {
            text-align: left;
            font-size: 1.8em;
            letter-spacing: 3px;
            text-shadow: 1px 1px 1px #fff;
        }

        .home-slide-text h3 {
            color: #333;
            font-size: 1.5em;
            text-align: left;
            margin-top: 0.5em;
            letter-spacing: 1px;
            text-shadow: 1px 1px #fff;
        }

        .home-slide-text a {
            color: #fff;
        }

        .home-slide-text .button.red {
            font-size: 18px;
            background: #c74b38;
            border-bottom: 3px solid #921c1b;
            border-radius: 2px;
            padding: 10px 35px;
            margin-top: 5px;
            display: inline-block;
        }

            .home-slide-text .button.red:hover {
                background: #ee4131;
                border-bottom: 3px solid #b43024;
            }

            .home-slide-text .button.red img {
                margin-top: -4px;
                margin-right: 15px;
                width: 25px;
            }

        .home-slide-text .size-small {
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 10px;
            color: #fff;
        }

        .home-slide-text .size-large {
            font-size: 26px;
            letter-spacing: 2px;
            font-weight: bold;
            margin-bottom: 35px;
        }

    .spotshubfront {
        background: #f3f3f3;
        position: relative;
    }

        .spotshubfront .read-more {
            margin: 0;
            position: absolute;
            top: 50%;
            right: 0;
            -webkit-transform: translate(0, -50%);
            -moz-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
        }

    .spotshubfront-car .spotshub-car {
        position: relative;
        float: right;
    }

    .spotshub-o2o {
        background: #f26c63;
        color: #fff;
    }

        .spotshub-o2o h2, .spotshub-o2o a {
            color: #fff;
        }

        .spotshub-o2o .o2o {
            padding: 25px 10px;
            max-width: 206px !important;
        }

    .spotshub-map {
        text-align: center;
        background: #f3f3f3;
    }

    .map-wrapper img {
        max-width: 100%;
    }

    .spotshub-promo img, .spotshub-car img {
        width: 100%;
    }

    .home-slide-content-block {
        width: 250px;
        height: 450px;
        background: rgba(255,255,255,0.85);
        position: absolute;
        left: 5%;
        top: 0;
        bottom: 0;
        margin: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 20px;
        font-size: 94%;
        line-height: 125%;
    }

        .home-slide-content-block h4 {
            margin-top: 0;
            color: #666;
            text-transform: uppercase;
        }

    .home-function-content-block h4 {
        color: #ee4131;
    }

    .home-pricing-estimation .fa {
        font-size: 12px;
    }

    .home-tracking-block {
        position: relative;
    }

        .home-tracking-block .smalltext {
            text-align: right;
            float: right;
            color: #999;
            font-size: 10px;
            margin: 0;
        }

            .home-tracking-block .smalltext.validate {
                float: left;
                color: rgb(247, 37, 37);
            }

    #packageTracking {
        display: inline-block;
        padding: 10px 15px;
        position: absolute;
        margin: 0;
        right: 15px;
        top: 41px;
        background: #ddd;
        text-transform: uppercase;
    }

    .home-tracking-link {
        text-align: right;
    }

    .home-function-content-block a.button {
        border: 1px solid #bcbcbc;
        display: block;
        width: 100%;
        text-align: center;
        padding: 8px 0 10px;
        color: #666;
    }

        .home-function-content-block a.button:hover {
            color: #F06969;
            background: transparent;
            border: 1px solid rgba(240,105,105, 0.6);
        }

    .home-function-content-block p {
        margin-bottom: 15px;
    }

    input[type="text"].home-tracking-field {
        outline: none;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid rgba(240,105,105, 0.6);
        background: rgba(255, 255, 255, 0.4);
        width: 100%;
        height: 40px;
    }

    input[type="text"]:focus {
        border-bottom: 1px solid #F06969;
    }

    input[type="text"]::-webkit-input-placeholder {
        font-size: 12px;
    }

    input[type="text"]:-moz-placeholder { /* Firefox 18- */
        font-size: 12px;
    }

    input[type="text"]::-moz-placeholder { /* Firefox 19+ */
        font-size: 12px;
    }

    input[type="text"]:-ms-input-placeholder {
        font-size: 12px;
    }

    @@media only screen and (max-width: 1100px) {
        .spotshub-car {
            margin-top: 5%;
        }
    }

    @@media only screen and (max-width: 768px) {
        .home-slide-image {
            height: 300px;
            overflow: hidden;
        }

        .home-slide .home-slide-image img {
            width: auto;
            height: 300px;
            float: right;
        }

        .home-slide-text {
            position: static;
            padding-top: 30px;
            padding-bottom: 30px;
            background: #f3f3f3;
        }

        .home-slide-text-wrapper {
            width: 80%;
            margin: auto;
        }

            .home-slide-text-wrapper h2 {
                margin-top: 0;
            }

        .home-slide-text h2, .home-slide-text .prom-block {
            padding: 0 35px;
        }

        .spotshubfront-car .spotshub-car {
            float: none;
            margin: 0 auto;
        }

        .spotshubfront .read-more {
            position: static;
            margin-top: 10px;
        }

        .o2o-image {
            text-align: center;
        }
    }

    @@media only screen and (max-width: 480px) {
        .home-slide .home-slide-image img {
            margin-right: -25%;
        }
    }

    #sh-page-wrapper, #master-page-wrapper {
        min-width: 0;
        width: auto;
    }
</style>

<div class="home-page">
    @{
        var routes = RouteTable.Routes.Count;
        routes.ToString();
    }
    <div id="sh-main" class="old-home">
        <main>
            <div class="sh-content">
                @Html.Action("ShippingWarnings", "Common", new { area = "" })
                <article>
                    <section>
                        <div class="home-slide">
                            <div class="home-slide-image">
                                <img src="/content/images/warehouse2.jpg" />
                            </div>
                            <div class="home-slide-text">
                                <div class="home-slide-text-wrapper">
                                    <h2>The next powerful<br /> E-commerce Marketplace</h2>
                                    <div class="prom-block"><h3>SpotsHUB online selling platform</h3><a class="button red bottomshade" href="@Url.RouteUrl("SellOnline")">Join Now</a><span>Launch on June 2015</span></div>
                                </div>
                            </div>

                        </div>
                    </section>
                </article>
                <section>
                    <div class="section-wrapper">
                        <div class="home-function-content-block row">
                            <div class="col-xxs-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 block home-tracking-block">
                                @Html.Action("TrackForm", "Shipment", new { area = "logistics" })
                            </div>
                            <div class="col-xxs-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 block home-pricing-estimation">
                                <h4>Find a Rate</h4>
                                <a class="button" href="@Url.Action("CalculateShippingRate", "Rate", new { area = "logistics" })"><i class="fa fa-usd"></i> Find</a>
                            </div>
                            <div class="col-xxs-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 block home-customer-service">
                                <h4>Need for Support</h4>
                                <a class="button" href="/contactus"><i class="fa fa-users"></i> Go</a>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="row spotshubfront">
                    <div class="section-wrapper">
                        <div class="col-xxs-12 col-xs-12 col-sm-9 col-md-9 col-lg-9">
                            <h2>Experience your first shipment FREE</h2>
                            <p>If you are a registered business in BC or Alberta, ship your first package for FREE.</p>
                        </div>
                        <div class="read-more col-xxs-12 col-xs-12 col-sm-3 col-md-3 col-lg-3"><a href="@Url.RouteUrl("ExpeditedShippingExperienceEvent")">Read more <img src="/content/images/temp_rightArrowRed.png" /></a></div>
                        <div class="clear"></div>
                    </div>
                </section>
                <section class="row spotshubfront-car">
                    <div class="section-wrapper">
                        <div class="spotshub-car col-xxs-12 col-xs-8 col-sm-6 col-md-5 col-lg-4">
                            <a href="@Url.RouteUrl("ShippingRegulation")">
                                <img src="/Content/images/sneak-peek-2.jpg" alt="Send your packages using the SpotsEXPRESS delivery service to save you time and money." />
                            </a>
                        </div>
                        <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-7 col-lg-8">
                            <h2>Ship Your Package with <span style="text-transform:none;">SpotsHUB</span> EXPRESS</h2>
                            <p>At SpotsHUB, we are committed to providing affordable, expedited courier service in Greater Vancouver and Calgary. Customer satisfaction being our top priority, we ensure that all your packages are shipped in a timely and professional manner.</p>
                            <div class="read-more"><a href="@Url.RouteUrl("ShippingRegulation")">Read more <img src="/content/images/temp_rightArrowRed.png" /></a></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </section>

                <section class="row spotshub-map">
                    <div class="section-wrapper">
                        <div class="col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <h2>We are now in Vancouver & Calgary</h2>
                            <div class="map-wrapper">
                                <img src="/Content/images/vanCalMapSmall.png" alt="Send your packages using the SpotsEXPRESS delivery service to save you time and money." />
                            </div>
                            <div class="read-more"><a href="@Url.RouteUrl("ShippingRegulation")?dest=vancouver">Coverage Maps <img src="/content/images/temp_rightArrowRed.png" /></a></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </section>
                <section class="row spotshub-promo">
                    <div class="section-wrapper">
                        <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <img src="/Content/images/open-store.jpg" alt="Sell your items with us, by opening your own SpotsHUB store." />
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <h2>SELL YOUR HIDDEN GEMS ON <span style="text-transform:none;">SpotsHUB</span></h2>
                                    <p>Vancouver is one of the most digitally connected places in the world, but many local businesses are not online because they don't know where to start - this is where we can help. Join SpotsHUB today and our professional team will assist you to sell your products online every step of the way.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <img src="/Content/images/shop-online.jpg" alt="Check out your local stores on SpotsHUB to see the extent of services we can prvide!" />
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <h2>Shop at Your Favourite Local Stores Online</h2>
                                    <p>Can you imagine ordering the perfect gift online for that special someone during the day and have it arrived before he or she comes home at night? Can you imagine the convenience of shopping at your favourite little local store from the comfort of your home? With SpotsHUB, you can.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </section>
            </div>
        </main>
    </div>


    <script>

        $('#newmenu .menu-left > li > a').css({ "left": "50px", "opacity": 0 });

        $(document).ready(function () {

            var menulength = $('#newmenu .menu-left > li > a').length;
            var animatedelay = 0;
            $('#newmenu .menu-left > li > a').each(function () {
                $(this).stop().delay(animatedelay).animate({ "left": 0, "opacity": 1 }, 250);
                animatedelay += 200;
            });

        });

    </script>
</div>
